<!--
 * @Author: 橘子
 * @Date: 2022-12-09 22:03:04
 * @Project_description: 地图
 * @Description: 代码是我抄的，不会也是真的
-->
<template>
  <el-dialog v-drag :before-close='handleClose' :visible.sync='show' title='地图' width='70%'>
    <baidu-map
      :ak='ak'
      :center='center'
      :dragging='dragging'
      :map-click='isClick'
      :zoom='zoom'
      class='bm-view'
      @click='click'>
      <!-- 比例尺控件 -->
      <bm-scale anchor='BMAP_ANCHOR_TOP_RIGHT'></bm-scale>
      <!-- 缩放控件 -->
      <bm-navigation anchor='BMAP_ANCHOR_TOP_RIGHT'></bm-navigation>
      <!--      地图类型控件-->
      <!--      <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>-->
      <!--      定位-->

      <!-- autoLocation  开启自动定位 -->
      <bm-geolocation
        :autoLocation='false'
        :showAddressBar='true'
        anchor='BMAP_ANCHOR_BOTTOM_RIGHT'
        @locationError='locationError'
        @locationSuccess='locationSuccess'></bm-geolocation>
      <!--城市选择控件-->
      <!--      <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>-->
      <!--      在地图中心添加可拖动的跳跃点标记-->
      <bm-marker :dragging='false' :position='position' animation='BMAP_ANIMATION_BOUNCE'>
        <bm-label
          :content='title'
          :labelStyle="{ color: 'red', fontSize: '16px' }"
          :offset='{ width: -35, height: 30 }' />
      </bm-marker>
      <!--      搜索框-->
      <bm-control :offset="{ width: '10px', height: '10px' }">
        <bm-auto-complete v-model='keyword' :sugStyle='{ zIndex: 1 }'>
          <el-input v-model='value' clearable placeholder='请输入地名关键字' @change='valueChange'>
            <el-button slot='append' icon='el-icon-search' @click='valueChange'></el-button>
          </el-input>
        </bm-auto-complete>
      </bm-control>
      <!--      对一个地图实例进行地区检索-->
      <bm-local-search
        :auto-viewport='true'
        :keyword='keyword'
        :location='center'
        :panel='false'
        selectFirstResult
        @markersset='markersset'></bm-local-search>
    </baidu-map>
    <span slot='footer' class='dialog-footer'>
      <el-button @click='show = false'>取 消</el-button>
      <el-button type='primary' @click='emit'>确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import setting from '@/setting'
import { Message } from 'element-ui'
import {
  BmAutoComplete,
  BmCityList,
  BmControl,
  BmGeolocation,
  BmLabel,
  BmLocalSearch,
  BmMapType,
  BmMarker,
  BmNavigation,
  BmScale,
} from 'vue-baidu-map'
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'

export default {
  name: 'y-map',
  // import引入的组件需要注入到对象中才能使用
  components: {
    BaiduMap,
    BmScale,
    BmNavigation,
    BmMapType,
    BmGeolocation,
    BmCityList,
    BmMarker,
    BmLabel,
    BmLocalSearch,
    BmControl,
    BmAutoComplete,
  },
  props: {
    //缩放等级
    zoom: {
      type: Number,
      default: 13,
    },
    // 定位, 可使用如“广州市海珠区”的地区字符串，也可以使用对象如 {lng: 116.404, lat: 39.915} 表示经纬度
    center: {
      type: String || Object,
      default: '渭南',
    },
    //允许点击 该项仅在地图组件挂载时加载一次
    isClick: {
      type: Boolean,
      default: true,
    },
    //	允许拖拽
    dragging: {
      type: Boolean,
      default: true,
    },
    //定位地址
    addr: {
      type: String,
      default: '',
    },
    //经纬度
    location: {
      type: Object,
    },
  },
  data() {
    // 这里存放数据
    return {
      ak: setting.appInfo.baiduAk,
      //标记定位地址
      position: {
        lng: 0,
        lat: 0,
      },
      title: '',
      keyword: '',
      value: '',
      BMap: null,
      map: null,
      show: false,
    }
  },
  // 方法集合
  methods: {
    // 百度地图初始化（这个一定要！否则地图回加载不出来）
    handler({ BMap, map }) {
      this.BMap = BMap
      this.map = map
      if (this.addr) {
        this.title = this.addr
      }
      if (JSON.stringify(this.location) !== '{}') {
        this.position = this.location
      }

    },
    click(e) {
      let _this = this
      this.position = e.point
      let geoCoder = new BMap.Geocoder()
      geoCoder.getLocation(e.point, function(res) {
        _this.title = res.address //获取到当前定位的详细地址信息
      })
    },
    //定位成功
    locationSuccess(point, AddressComponent, marker) {
      // console.log(point, AddressComponent, marker)
    },
    //定位失败
    locationError() {
      Message.error('定位失败')
    },
    //  搜索
    valueChange() {
      this.keyword = this.value
    },
    //  搜索完成后
    markersset(e) {
      try {
        if (e[0]) {
          this.position = e[0].point
          this.title = e[0].address + e[0].title
        }
      } catch (e) {
      }
    },
    //  关闭窗口
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {
        })
    },
    //提交
    emit() {
      console.log('经纬度', this.position)
      console.log('地址名称', this.title)
      if (!this.title) return Message.error('请选择位置')
      this.$emit('emit', this.position, this.title)
      this.show = false
    },
  },
}
</script>

<style lang='scss' scoped>
//@import url(); 引入公共css类
.bm-view {
  width: 100%;
  height: 70vh;
}
</style>
